<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('参数列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="config-form">
                <div class="select-list">
                    <ul>
                        <li>
                            用户pin：<input type="text" name="pin"/>
                        </li>
                        <li>
                            接口：<input type="text" name="uri"/>
                        </li>
                        <li>
                            uuid：<input type="text" name="uuid"/>
                        </li>
                        <li>
                            客户端：
                            <select name="clientType">
                                <option value ="1">android</option>
                                <option value ="2">apple</option>
                                <option value ="3" selected="selected">所有</option>
                            </select>
                        </li>
                        <li>
                            客户端版本：<input type="text" name="clientVersion"/>
                        </li>
                        <li>
                            服务器IP：<input type="text" name="serverIp"/>
                        </li>
                        <li>
                            用户IP：<input type="text" name="userIp"/>
                        </li>
                        <li>
                            追踪id：<input type="text" name="tracerId"/>
                        </li>
                        <li>
                            <a class="btn btn-success btn-xs" onclick="setTime(10 * 60 * 1000)"><i class="fa fa-refresh"></i>近10分钟</a>
                            <a class="btn btn-success btn-xs" onclick="setTime(30 * 60 * 1000)"><i class="fa fa-refresh"></i>近半小时</a>
                            <a class="btn btn-success btn-xs" onclick="setTime(1 * 60 * 60 * 1000)"><i class="fa fa-refresh"></i>近1小时</a>
                            <a class="btn btn-success btn-xs" onclick="setTime(4 * 60 * 60 * 1000)"><i class="fa fa-refresh"></i>近4小时</a>
                            <a class="btn btn-danger btn-xs" onclick="setTime(24 * 60 * 60 * 1000)"><i class="fa fa-refresh"></i>前1天</a>
                            <a class="btn btn-danger btn-xs" onclick="setTime(0)"><i class="fa fa-refresh"></i>今天</a>
                            <a class="btn btn-danger btn-xs" onclick="setTime(-24 * 60 * 60 * 1000)"><i class="fa fa-refresh"></i>后1天</a>
                        </li>
                        <li class="select-time">
                            <label>创建时间： </label>
                            <input type="text" class="datetime-input" id="startTime" placeholder="开始时间" name="beginTime"/>
                            <span>-</span>
                            <input type="text" class="datetime-input" id="endTime" placeholder="结束时间" name="endTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    function setTime(t) {
        //如果开始结束时间都为空，或者近几个小时, 则使用现在时间
        if ((isnull($("#startTime").attr("value")) && isnull($("#endTime").attr("value")))
            || (t < 24 * 60 * 60 * 1000 - 1 && t > -24 * 60 * 60 * 1000 + 1)) {
            dealWithNowDate(t);
            return;
        }

        //获取开始时间并转化
        if (!isnull($("#startTime").attr("value"))) {
            var start = new Date($("#startTime").attr("value").replace(/-/g,'/'));
            var start_s = start.getTime();
            start.setTime(start_s - t);
            $("#startTime").attr("value",formatDate(start));
        }
        //获取结束时间并转化
        if (!isnull($("#endTime").attr("value"))) {
            var end = new Date($("#endTime").attr("value").replace(/-/g,'/'));
            var end_s = end.getTime();
            end.setTime(end_s - t);
            $("#endTime").attr("value",formatDate(end));
        }
    }

    function isnull(str) {
        if (str == '' || str == undefined || str == null) {
            return true;
        } else {
            return false;
        }
    }

    var dealWithNowDate = function(t) {
        var cur = new Date();
        if (t > 0) {//近x小时
            $("#endTime").attr("value",formatDate(cur));

            var cur_s = cur.getTime();
            cur.setTime(cur_s - t);

            $("#startTime").attr("value",formatDate(cur));
        }  else if (t < 0) {//后x小时
            $("#startTime").attr("value",formatDate(cur));

            var cur_s = cur.getTime();
            cur.setTime(cur_s - t);

            $("#endTime").attr("value",formatDate(cur));
        } else {//今天
            $("#startTime").attr("value",formatNowDateStart(cur));
            $("#endTime").attr("value",formatNowDateEnd(cur));
        }
    }

    var formatDate = function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        var second= date.getSeconds();
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+ second;
    };

    var formatNowDateStart = function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;

        return y + '-' + m + '-' + d+' '+'00'+':'+'00'+':'+ '00';
    };

    var formatNowDateEnd = function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;

        return y + '-' + m + '-' + d+' '+'23'+':'+'59'+':'+ '59';
    };

    var prefix = ctx + "tracer/cart";

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/detail?id={id}&pin={pin}&uuid={uuid}&createTime={createTime}",
            linkUrl: prefix + "/link?id={id}&createTime={createTime}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "参数",
            columns: [{
                checkbox: true
            },
                {
                    field: 'pin',
                    title: 'pin'
                },
                {
                    field: 'uri',
                    title: '    uri  (接口)  ',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value, 20, "open");
                    }
                },
                {
                    field: 'tracerId',
                    title: '跟踪id',
                    formatter: function(value, row, index) {
                        return value + "";
                    }
                },
                {
                    field: 'uuid',
                    title: 'uuid'
                },
                {
                    field: 'costTime',
                    title: '耗时',
                    formatter: function(value, row, index) {
                        if (value < 0) {
                            return 0 - value;
                        } else {
                            return value;
                        }
                    }
                },
                {
                    field: 'clientType',
                    title: '客户端',
                    formatter: function(value, row, index) {
                        if (value !== null && (value === 1 || value == "1")) {
                            return 'android';
                        } else if (value !== null && (value === 2 || value == "2")) {
                            return 'apple';
                        } else {
                            return '其他';
                        }
                    }
                },
                {
                    field: 'clientVersion',
                    title: '客户端版本'
                },
                {
                    field: 'userIp',
                    title: '用户ip'
                },
                {
                    field: 'serverIp',
                    title: '服务ip'
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit2(\'' + row.tracerId  + '\', \'' + row.pin  + '\', \'' + row.uuid  + '\', \'' + row.createTime  + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit3(\'' + row.tracerId  + '\', \'' + row.createTime  + '\')"><i class="fa fa-edit"></i>查看链路</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>